<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>大咖vip_未登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
    body {
        background-color: #fff;
    }

        .lists {
            padding: 12px 10px 0px 10px;
        }

        .childlist {
            width: 50%;
            float: left;
            padding: 0px 6px;
            margin-bottom: 7px;
        }

        .set {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            margin-bottom: 2px;
        }

        .listwenzi {
            font-size: 13px;
            color: #070707;
            margin: 5px 0px;
        }

        .listwenzi img {
            display: inline-block;
            height: 9px;
            width: 5px;
            margin-left: 5px;
        }

        .state {
            font-size: 15px;
            color: #9D9D9D;
            padding-left: 15px;
            height: 25px;
            line-height: 25px;
            float: left;
        }


        .tupian {
            width: 100%;
            padding-bottom: 51.5%;
            position: relative;
        }

        .tupian img {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            width: 100%;
            height: 100%;
        }

        .tupian .videotype {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 9;
            background-color: rgba(243, 152, 0, 0.9);
            color: #fff;
            padding: 0px 8px;
            font-size: 12px;
            border-radius: 5px;
        }

        .tupian .videotypedaka {
            background-color: rgba(187, 0, 12, 1);
        }

        .tupian .videotypemianfei {
            background-color: rgba(230, 67, 0, 1);
        }


        .text {
            width: 100%;
            text-align: center;
            height: 104px;
            position: absolute;
            margin-top: -52px;
            top: 50%;
        }

        .text img {
            width: 90px;
            margin: 0 auto;
            display: block;
            vertical-align: middle;
        }

        .img_jt {
            width: 6px;
            display: inline;
            margin-left: 9px;
            height: 11px;
        }
    </style>
</head>

<body>
    <div id="vm" v-cloak>

        <div v-if="!iskong">
            <!-- <div class="lists">
              <div style="margin-bottom:10px;font-size:14px;">
                    <span>大咖热门</span>
                    <img src="../../image/youjiantou.png" alt="" class="img_jt">
                </div>
                <div class="childlist" @click="Openjieshao(item)" v-for="item in videogetlists" v-show="item.video_type==3">
                    <div class="tupian">
                        <<span class="videotype" class="videotype" :class="{videotypedaka:item.video_type==3}">大咖</span>
                        <img v-bind:src="item.img" alt="" style="border-radius: 5px;">
                    </div>
                        <div class="title_set aui-ellipsis-1" v-html="item.video_name" style="font-size:14px;"></div>
                        <p class="set aui-ellipsis-1">{{item.video_introduce_small}}</p>

                </div>
                <div class="aui-clearfix"></div>
            </div>
            <div style="height:10px;background-color:#e5e5e5;"></div>
            <div class="lists">
                <div style="margin-bottom:10px;font-size:14px;">
                    <span>VIP大片</span>
                    <img src="../../image/youjiantou.png" alt="" class="img_jt">
                </div>
                <div class="childlist" @click="Openjieshao(item)" v-for="item in videogetlists" v-show="item.video_type==2">
                    <div class="tupian">
                        <span class="videotype" class="videotype">VIP</span>
                        <img v-bind:src="item.img" alt="" style="border-radius: 5px;">
                    </div>
                        <div class="title_set aui-ellipsis-1" v-html="item.video_name"></div>
                        <p class="set aui-ellipsis-1">{{item.video_introduce_small}}</p>

                </div>
                <div class="aui-clearfix"></div>
            </div> -->
            <!-- <div style="height:10px;background-color:#e5e5e5;"></div> -->
            <div class="lists">
                <!-- <div style="margin-bottom:10px;font-size:14px;">
                  <span>视频</span>
                    <span>免费视频</span> 
                    <img src="../../image/youjiantou.png" alt="" class="img_jt">
                </div> -->
                <div class="childlist" @click="Openjieshao(item)" v-for="item in videogetlists" v-show="item.video_type==1">
                    <div class="tupian">
                        <!-- <span class="videotype" class="videotype" :class="{videotypedaka:item.video_type==1}">免费</span> -->
                        <img v-bind:src="item.img" alt="" style="border-radius: 5px;">
                    </div>
                        <div class="title_set aui-ellipsis-1" v-html="item.video_name"></div>
                        <p class="set aui-ellipsis-1">{{item.video_introduce_small}}</p>

                </div>
                <div class="aui-clearfix"></div>
            </div>
        </div>
        <div class="text" v-else>
            <img src="../../image/home/cat_1.png" alt="">
            <div style="font-size:16px;color:#C8C8C8;margin-top:12px;">暂无内容</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var uid = $api.getStorage('uid');
    var vm = new Vue({
        el: '#vm',
        data: {
            Leaderlist: [],
            videogetlists: [],
            leader_id: '',
            isloginflag: true,
            isvipflag: false,
            avatar: '',
            nickname: '',
            page: 1,
            iskong: false
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

            }
        },
        methods: {
            init: function() {
                var _this = this;
                api.addEventListener({
                    name: 'scrolltobottom',
                    extra: {
                        threshold: 80 //设置距离底部多少距离时触发，默认值为0，数字类型
                    }
                }, function(ret, err) {
                    if (!_this.iskong) {
                        _this.page = _this.page + 1;
                        _this.videogetlist();
                    }
                });
                _this.leader_id = api.pageParam.leaderid;
                _this.videogetlist();
                api.addEventListener({
                    name: 'qiehuan'
                }, function(ret, err){
                  _this.leader_id = ret.value.leaderid;
                  _this.videogetlists = [];
                  _this.page =  '1';
                  _this.videogetlist();
                });


            },
            videotype: function(res) {
                if (res == 2) {
                    return 'VIP'
                } else if (res == 3) {
                    return '大咖'
                } else {
                    return '免费'
                }
            },
            settime: function(res) {
                return apicmmon.formatDateTime(res)
            },

            videlist: function(item, index) {
                this.Leaderlist.map(function(res, index2) {
                    res.flag = false;
                })
                item.flag = true
                Vue.set(this.Leaderlist, index, item)
                var _this = this;
                _this.page = 1;
                _this.leader_id = item.id;
                _this.videogetlists = [];
                _this.videogetlist();

            },
            videogetlist() {
                var _this = this;

                new rest().get('videogetlist').datae({
                    leader_id: _this.leader_id,
                    page: _this.page
                }).success(function(res) {
                    if (res.flag == 1) {
                        if (res.msg.length == 0) {
                            if (_this.page == 1) {
                                _this.iskong = true;
                            } else {
                                _this.iskong = false;
                                _this.page = _this.page;
                                api.toast({
                                    msg: '没有更多了',
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }
                        } else {
                            _this.iskong = false;
                            _this.videogetlists = _this.videogetlists.concat(res.msg);
                        }
                    }
                }).run()
            },
            Openjieshao: function(item) {
                var _this = this;
                if (uid) {
                    var data1 = {
                        video_id: item.video_id,
                        uid: uid
                    }
                } else {
                    var data1 = {
                        video_id: item.video_id,
                        uid: ''
                    }
                }
                new rest().get('getDetail').datae(data1).success(function(res) {
                    console.log(JSON.stringify(res))
                    if (res.flag == 1) {
                        apicmmon.openwin('videodetail_win', '../VIP/videodeail.html', {
                            videoid: item.video_id
                        })
                    } else {
                        api.toast({
                            msg: '视频不存在',
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            },

        }
    })


</script>

</html>
